<!-- fileinput -->
<link href="/vendors/bootstrap-fileinput/css/fileinput.css" rel="stylesheet"/>
<!-- bootstrap-progressbar -->
<link href="/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<main class="app-content" id="travelsDiv">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>游记</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">游记</a></li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <a class="btn btn-success" data-toggle="modal" data-target="#addScenery">
                    <i class="fa fa-edit m-right-xs"></i>新建游记
                </a>
                <div class="tile-body">
                    <div class="clearfix">
                        <div class="float-left" style="margin: 13px;" v-for="travel in pageInfo.list">
                            <div class="card" style="width: 18rem; height: 500px;">
                                <img v-bind:src="travel.images[0].image" class="card-img-top"
                                     style="height: 350px;max-width: 18rem">
                                <div class="card-body">
                                    <h5 class="card-title">
                                        <span v-for="(i,index) in 7">{{travel.travelName[index]}}</span>......
                                    </h5>
                                    <p class="card-text">
                                        <span v-for="(i,index) in 15">{{travel.travelDetail[index]}}</span>......
                                    </p>
                                    <a href="#" class="btn btn-primary"
                                       @click="initTravel(travel.travelId)">查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="pages/addTravel"></div>
</main>
<!-- fileinput -->
<script src="/vendors/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/vendors/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>
<script>
    var travelsVue = new Vue({
        el: "#travelsDiv",
        data: {
            pageInfo: {
                list: [],
                total: "",
                navigatepageNums: 0,
                pageNum: "",
            },
            searchBean: {
                keyword: "",
                currentPage: 0,
            },
            travel: {
                userId: "",
                images: []
            }
        },
        methods: {
            initPage: function (index) {
                var self = this;
                self.searchBean.currentPage = index;
                self.images = []
                $.ajax({
                    url: "/api/travels",
                    type: "post",
                    contentType: "application/json",
                    data: JSON.stringify(self.searchBean),
                    success: function (rs) {
                        self.pageInfo = rs;
                        console.log(rs)
                    }
                })
            },
            initTravel: function (id) {
                var self = this;
                sessionStorage.setItem("travelId", id);
                window.location.href = "/pages/travel";
            },
            initImage: function () {
                var self = this;
                $("#uploadImage").fileinput({
                    language: "zh",
                    uploadUrl: "/api/upload/travel",
                    allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp", "gif"],
                    showUpload: true,
                    showRemove: false,
                    showPreview: true,
                    showCaption: true,
                    browseClass: "btn btn-primary",
                    removeClass: "btn btn-danger",
                    dropZoneEnabled: true,
                    maxFileCount: 5,
                    autoReplace: true,//是否可替换
                    layoutTemplates: {
                        actionUpload: ''
                    },
                    enctype: 'multipart/form-data',
                    msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
                    validateInitialCount: true,
                }).on('fileerror', function (event, data, msg) {
                    layer.alert("Upload file failed" + msg, {icon: 0});
                }).on('fileuploaded', function (event, data) {
                    if (data.response.status === 200) {
                        console.log(data.response.data)
                        self.travel.images.push({"image": data.response.data})
                    } else {
                        $(".fileinput-remove-button").click();
                    }
                    layer.alert(data.response.message, {icon: 0});
                }).on('fileclear', function (event) {
                });
            },
            updateModule: function () {
                var self = this;
                self.travel.user = {userId: $("#userId").val()}
                console.log(self.travel)
                if (self.travel.travelName === "" || self.travel.travelDetail === "" || self.travel.images.length === 0) {
                    layer.alert("不能为空", {icon: 0});
                } else {
                    $.ajax({
                        url: "/api/travel",
                        type: "post",
                        contentType: "application/json",
                        data: JSON.stringify(self.travel),
                        success: function (rs) {
                            if (rs.status === 200) {
                                window.location.reload();
                            } else {
                                layer.alert(rs.message, {icon: 0});
                            }
                        },
                        error: function (rs) {
                            layer.alert(rs.responseText, {icon: 0});
                        }
                    })
                }
            }
        },
        created: function () {
            window.updateModule = this.updateModule;
        },
        mounted: function () {
            this.initPage(0);
            this.initImage();
        }
    })
</script>